<template>
  <div style="padding: .1rem .2rem">
    <el-table
        :data="items"
        stripe
        :header-cell-style="{background:'#F5F7FA',color:'#333333'}"
        style="width: 100%;"
    >
      <el-table-column type="index" width="60" label="序号"/>
      <el-table-column
          prop="features"
          width="150"
          label="流程节点"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop=""
          label="请求入参">
        <template #default="scope">
          <div class="container-wrap" @click="showJsonDialog(scope.row.request_params)">{{scope.row.request_params}}</div>
        </template>
      </el-table-column>
      <el-table-column
          prop=""
          label="请求结果">
        <template #default="scope">
          <div class="container-wrap" @click="showJsonDialog(scope.row.result)">{{scope.row.result}}</div>
        </template>
      </el-table-column>
      <el-table-column
          prop=""
          width="180"
          label="开始时间">
        <template #default="scope">
          {{mon(scope.row.start_time)}}
        </template>
      </el-table-column>
      <el-table-column
          prop=""
          width="180"
          label="结束时间">
        <template #default="scope">
          {{mon(scope.row.end_time)}}
        </template>
      </el-table-column>
      <el-table-column
          prop=""
          width="100"
          label="耗时">
        <template #default="scope">
          {{scope.row.takeUpTime}}秒
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="dialog-footer">
    <el-button type="primary" @click="cancelFun">确定</el-button>
    <el-button @click="cancelFun">关闭</el-button>
  </div>
  <el-dialog v-model="dialogTableVisible" width="800"  class="json-dialog">
    <div class="json-div">
      <json-viewer
          v-if="flag"
          :value="params"
          :expand-depth="10"
          boxed
          sort
          :show-array-index="false"
          copyable
      >
        <template slot="copy">
          <i class="el-icon-document-copy" title="复制"></i>
        </template>
      </json-viewer>
      <div v-else v-html="params"></div>
    </div>
  </el-dialog>
</template>

<script>
import JsonViewer from 'vue-json-viewer'
import { getLogDetail } from '@/api/chartdb'
import moment from 'moment'
import { ElMessage } from 'element-plus'
export default {
  name: 'logDetail',
  components:{ JsonViewer },
  props:{
    sessionId:{
      type: String,
      required: true,
    },
  },
  emits:["cancel"],
  data(){
    return {
      jsonStr:'',
      items:[],
      dialogTableVisible:false,
      params:{},
      flag:false,
    }
  },
  watch: {
    sessionId(newIndex, oldIndex) {
      this.getLogDetail(newIndex);
    }
  },
  mounted() {
    this.getLogDetail(this.sessionId);
  },
  methods:{
    showJsonDialog(paramsStr){
      paramsStr=paramsStr.replace(/\n/ig,"")
      this.flag=this.isJsonString(paramsStr)
      // paramsStr=JSON.stringify(paramsStr)
      if(this.flag){
        this.params=JSON.parse(paramsStr)
      }else {
        this.params=JSON.stringify(paramsStr)
        ElMessage({
          showClose: true,
          message: '字符串不是JSON格式或JSON格式错误！',
          type: 'warning',
        })
      }
      this.dialogTableVisible=true;
    },
    isJsonString(str) {
      try {
        JSON.parse(str);
        return true;
      } catch (e) {
        return false;
      }
    },
    mon(date){
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
    },
    cancelFun(){
      this.$emit("cancel","")
    },
    getLogDetail(sessionId){
      getLogDetail({sessionId:sessionId}).then((res) => {
        this.items=res.data.data
        this.items.forEach(item=>{
          item.takeUpTime = (new Date(item.end_time).getTime()-new Date(item.start_time).getTime())/1000
        })
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  .dialog-footer{
    height: .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .container-wrap{
    width: 100%; /* 指定容器的宽度 */
    white-space: nowrap; /* 防止换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
    cursor: pointer;
  }
  .el-popper{
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>